<template>
  <el-card STYLE="height: 200px" @click="toPetDetail" class="card" :body-style="{ padding: '0px' }">
    <el-avatar style="margin-top: 20px" :size="120" v-bind:src="data.avatarUrl" />
    <div style="padding: 14px">
      <span>{{data.name}}</span>
    </div>
  </el-card>
</template>

<script>

export default {
  name: "PetCard",
  props:{
    data:{
      id: '',
      name: '',
      age: '',
      gender: '',
      weight: '',
      variety: '',
      avatarUrl: '',
    }
  },
  methods:{
    toPetDetail(){
      this.$router.push('/petCardDetail?id='+this.data.id);
    }
  }

}
</script>

<style>
</style>